<template>
  <van-row class="feedback-page">
    <van-nav-bar
      fixed
      placeholder
      left-text="返回"
      title="意见反馈"
      left-arrow
      @click-left="onClickLeft"
      ><button
        slot="right"
        class="right"
        @click="clickRight"
        ref="rightRef"
        :disabled="sendDisabled"
      >
        发送
      </button></van-nav-bar
    >
    <van-field
      required
      v-model.trim="text"
      @input="input"
      rows="5"
      autosize
      type="textarea"
      maxlength="300"
      placeholder="请输入问题描述，点击下方“+”号提交截图，帮助我们更快定位您的问题"
      show-word-limit
    />
    <van-row class="my-uploader">
      <van-uploader
        :after-read="afterRead"
        v-model="fileList"
        multiple
        :max-count="9"
      >
        <van-row class="upload"
          ><div class="add">+</div>
          <div class="picture">上传照片</div></van-row
        >
      </van-uploader>
      <van-cell-group>
        <van-row class="contact">
          <van-field
            v-model="textContact"
            label="联系方式"
            placeholder="QQ/邮箱/手机号等"
          />
        </van-row>
      </van-cell-group>
    </van-row>
  </van-row>
</template>

<script>
import {
  Toast, NavBar, Field, Uploader, Row, CellGroup, Button,
} from 'vant';
import request from '@/utils/request';

export default {
  components: {
    [NavBar.name]: NavBar,
    [Field.name]: Field,
    [Uploader.name]: Uploader,
    [Row.name]: Row,
    [CellGroup.name]: CellGroup,
    [Button.name]: Button,
  },
  mounted() {
    this.getParams();
    this.empty();
  },
  methods: {
    input() {
      this.empty();
    },
    empty() {
      const { rightRef } = this.$refs;
      if (this.text.length === 0 && this.fileArr.length === 0) {
        this.sendDisabled = true;
        rightRef.style.color = '#A8A8A8';
        return false;
      }
      this.sendDisabled = false;
      rightRef.style.color = 'blue';
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      file.status = 'uploading';
      file.message = '上传中...';
      const formData = new FormData();
      formData.append('files', file.file);

      if (this.getPicture(formData)) {
        file.status = 'success';
        file.message = '上传成功...';
      } else {
        file.status = 'failed';
        file.message = '上传失败...';
      }
    },
    // 上传图片
    async getPicture(formdata) {
      const { data } = await request({
        url: '/api/oss/UploadTempFiles',
        method: 'POST',
        data: formdata,
      });
      if (data.Code != 1) return;
      this.pic = data.Detail;
      this.fileArr.push(data.Detail);
      this.empty();
    },
    // 获取参数
    async getParams() {
      const { data } = await request({
        url: '/api/chat/GetTopicByPkgName?pkgname=com.sfsm.quickstartapp',
        methods: 'POST',
      });
      this.TopicId = data.Detail.TopicId;
      this.ChannelId = data.Detail.ChannelId;
      this.token = '41f8e1bf-b284-4e47-92d4-b8d0c6e81a14';
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    // 发送
    async clickRight() {
      if (this.text.length === 0 && this.fileArr.length === 0) {
        this.sendDisabled = true;
        Toast('内容不能为空');
        return false;
      }
      this.sendDisabled = false;
      Toast('you');

      const { rightRef } = this.$refs;
      const { data } = await request({
        url: '/api/chat/InsertSubject',
        method: 'POST',
        data: {
          TopicId: this.TopicId,
          ChannelId: this.ChannelId,
          token: this.token,
          subjectcontent: `${this.text}${this.textContact}${this.fileArr.map(
            (url) => `${(<img src="${url}" />)}`,
          )}`,
        },
      });
      if (data.Code != 200) {
        Toast(`${'发送失败' + '  '}${data.Msg}`);
      } else {
        Toast('发送成功');
      }
    },
  },
  data() {
    return {
      TopicId: '',
      ChannelId: '',
      fileArr: [],
      pic: '',
      fileList: [],
      text: '',
      textContact: '',
      message: {},
      sendDisabled: false,
    };
  },
};
</script>

<style lang="less" scoped>
//头部导航栏样式
.van-nav-bar {
  position: fixed;
  width: 100%;
  left: 0px;
  top: 0px;
}
/deep/ .van-nav-bar .van-icon {
  color: #3b3b3b;
}
/deep/ .van-ellipsis {
  color: #3b3b3b;
  font-size: 19px;
}
/deep/ .van-nav-bar__text {
  color: #3b3b3b;
  font-size: 17px;
  .van-field {
    margin-top: 58px;
  }
}
//插槽发送
.right {
  font-size: 16px;
  color: blue;
  border: none;
  background-color: transparent;
  outline: none;
}
.my-uploader {
  margin: 20px 0px 0px 17px;
  .upload {
    width: 100px;
    height: 100px;
    background-color: #f2f2f2;
    font-size: 13px;
    color: #b8b8b8;
    .add {
      text-align: center;
      font-size: 20px;
      padding: 19px 0px 15px 0px;
    }
    .picture {
      text-align: center;
    }
  }
}
.contact {
  margin-top: 20px;
  padding: 10px 0px;
  font-size: 15px;
  color: #3b3b3b;
  em {
    margin-left: 50px;
    color: #adadad;
  }
}
</style>
